<template>
  <div class="realtime-section">
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <a-card title="🕐 最新动态" class="realtime-card">
          <template #extra>
            <a-button type="text" size="small">
              <template #icon><i class="icon icon-refresh"></i></template>
              刷新
            </a-button>
          </template>
          <div class="activity-list">
            <div
              v-for="activity in recentActivities"
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-icon" :class="`activity-${activity.type}`">
                <i :class="activity.icon"></i>
              </div>
              <div class="activity-content">
                <div class="activity-text">{{ activity.content }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="🔥 热门内容榜" class="realtime-card">
          <template #extra>
            <a-radio-group
              v-model="hotContentPeriod"
              type="button"
              size="small"
            >
              <a-radio value="today">今日</a-radio>
              <a-radio value="week">本周</a-radio>
              <a-radio value="month">本月</a-radio>
            </a-radio-group>
          </template>
          <div class="hot-content-list">
            <div
              v-for="(article, index) in hotArticles"
              :key="article.id"
              class="hot-article-item"
            >
              <div
                class="article-rank"
                :class="`rank-${index + 1 <= 3 ? index + 1 : 'other'}`"
              >
                {{ index + 1 }}
              </div>
              <div class="article-info">
                <div class="article-title">{{ article.title }}</div>
                <div class="article-stats">
                  <span><i class="icon icon-eye"></i> {{ article.views }}</span>
                  <span
                    ><i class="icon icon-heart"></i> {{ article.likes }}</span
                  >
                  <span
                    ><i class="icon icon-message"></i>
                    {{ article.comments }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  // 最新动态
  const recentActivities = ref([
    {
      id: 1,
      type: 'article',
      icon: 'icon icon-file',
      content: '发布了新文章《Vue3+TypeScript项目最佳实践》',
      time: '2小时前',
    },
    {
      id: 2,
      type: 'comment',
      icon: 'icon icon-message',
      content: '《Spring Boot微服务架构》收到新评论',
      time: '4小时前',
    },
    {
      id: 3,
      type: 'view',
      icon: 'icon icon-eye',
      content: '《JavaScript异步编程详解》阅读量突破500',
      time: '6小时前',
    },
    {
      id: 4,
      type: 'like',
      icon: 'icon icon-heart',
      content: '《React Hooks实战指南》获得15个赞',
      time: '8小时前',
    },
    {
      id: 5,
      type: 'share',
      icon: 'icon icon-share-alt',
      content: '《算法与数据结构总结》被分享3次',
      time: '1天前',
    },
  ]);

  // 热门文章
  const hotContentPeriod = ref('week');
  const hotArticles = ref([
    {
      id: 1,
      title: 'Vue3组合式API最佳实践指南',
      views: 1247,
      likes: 89,
      comments: 23,
    },
    {
      id: 2,
      title: 'Spring Boot微服务架构设计',
      views: 986,
      likes: 67,
      comments: 18,
    },
    {
      id: 3,
      title: 'JavaScript异步编程全面解析',
      views: 845,
      likes: 56,
      comments: 15,
    },
    {
      id: 4,
      title: 'React Hooks深度剖析',
      views: 723,
      likes: 45,
      comments: 12,
    },
    {
      id: 5,
      title: '算法与数据结构学习心得',
      views: 698,
      likes: 43,
      comments: 11,
    },
  ]);
</script>

<style lang="less" scoped>
  .realtime-section {
    margin-bottom: 32px;

    .realtime-card {
      border-radius: 20px;
      height: 420px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

      :deep(.arco-card-header) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 20px 24px 16px;

        .arco-card-header-title {
          font-size: 16px;
          font-weight: 600;
          color: #2d3748;
        }
      }

      .activity-list {
        max-height: 340px;
        overflow-y: auto;
        padding-right: 4px;

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.05);
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.2);
          border-radius: 2px;
        }

        .activity-item {
          display: flex;
          align-items: flex-start;
          padding: 16px;
          margin-bottom: 8px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.6);
          border: 1px solid rgba(255, 255, 255, 0.2);
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateX(4px);
          }

          .activity-icon {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            font-size: 14px;

            &.activity-article {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              color: white;
            }

            &.activity-comment {
              background: linear-gradient(135deg, #fcb045 0%, #fd1d1d 100%);
              color: white;
            }

            &.activity-view {
              background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
              color: white;
            }

            &.activity-like {
              background: linear-gradient(135deg, #ff758c 0%, #ff7eb3 100%);
              color: white;
            }

            &.activity-share {
              background: linear-gradient(
                135deg,
                #833ab4 0%,
                #fd1d1d 50%,
                #fcb045 100%
              );
              color: white;
            }
          }

          .activity-content {
            flex: 1;

            .activity-text {
              color: #2d3748;
              margin-bottom: 6px;
              line-height: 1.5;
              font-size: 14px;
              font-weight: 500;
            }

            .activity-time {
              font-size: 12px;
              color: #718096;
              font-weight: 400;
            }
          }
        }
      }

      .hot-content-list {
        max-height: 340px;
        overflow-y: auto;
        padding-right: 4px;

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-track {
          background: rgba(0, 0, 0, 0.05);
          border-radius: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.2);
          border-radius: 2px;
        }

        .hot-article-item {
          display: flex;
          align-items: center;
          padding: 16px;
          margin-bottom: 8px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.6);
          border: 1px solid rgba(255, 255, 255, 0.2);
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.8);
            transform: translateX(4px);
          }

          .article-rank {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            margin-right: 14px;

            &.rank-1 {
              background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
              color: white;
            }

            &.rank-2 {
              background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
              color: white;
            }

            &.rank-3 {
              background: linear-gradient(135deg, #48dbfb 0%, #0abde3 100%);
              color: white;
            }

            &.rank-other {
              background: rgba(0, 0, 0, 0.1);
              color: #718096;
            }
          }

          .article-info {
            flex: 1;

            .article-title {
              color: #2d3748;
              margin-bottom: 8px;
              font-weight: 500;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .article-stats {
              display: flex;
              gap: 16px;
              font-size: 12px;
              color: #718096;

              span {
                display: flex;
                align-items: center;
                gap: 4px;
                font-weight: 500;

                i {
                  font-size: 11px;
                }
              }
            }
          }
        }
      }
    }
  }

  // 响应式适配
  @media (max-width: 1200px) {
    .realtime-section {
      margin-bottom: 24px;

      .realtime-card {
        height: 360px;
      }
    }
  }

  @media (max-width: 768px) {
    .realtime-section {
      margin-bottom: 20px;

      .realtime-card {
        height: 300px;
        border-radius: 16px;

        .activity-list,
        .hot-content-list {
          max-height: 220px;

          .activity-item,
          .hot-article-item {
            padding: 12px;
            margin-bottom: 6px;

            .activity-icon {
              width: 28px;
              height: 28px;
              margin-right: 10px;
            }

            .activity-text,
            .article-title {
              font-size: 13px;
            }
          }
        }
      }
    }
  }
</style>
